<template>
	<view>
		<view class="all">
			<swiper :indicator-dots="true" :interval="3000" :duration="500" class="swiperInfo" current='1'
				indicator-active-color="white">
				<swiper-item class="swiper-item0">
					<view>
						<view>
							<scroll-view scroll-y width="100%" style="height: 70vh;">
								<view class="PersonTittle">
									<view>
										<image :src="songer.data.singerPhoto" class="singerImage"></image>
									</view>
									<view class="textt1">
										{{songer.data.singerName}}
									</view>
								</view>
								<view class="text2">
									<view class="tuijian">类型歌曲推荐</view>
									<view>
										<view class="listMap">
											<view class="listInfo">
												<view class="info" @tap="toRadio(item.songId)"
													v-for="item in tuijianSongs.data" :key="item.songId">
													<view>
														<image :src="item.songPhoto" class="imageSong"></image>
													</view>
													<view class="songInfo">
														<view class="song">{{item.songName}}</view>
														<view class="singer">{{item.singerName}}</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="songInfo">
									<view class="tuijian">歌手信息</view>
									<view>
										<view>{{songer.data.singerIndroduce || "无"}}</view>
									</view>
								</view>
								<view style="height: 30rpx;"></view>
							</scroll-view>

						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item1">
					<view>
						<view class="content-play">
							<!-- 显示音乐信息 -->
							<view class="content-play-info">
								<text class="text1">{{song.songName}}</text>
								<view> —— {{song.singerName||"请选择歌曲进行播放"}} ——</view>
							</view>
							<!-- 显示专辑封面 -->
							<view class="content-play-cover">
								<image :src="song.songPhoto" :class="['image1',isPlay?'zhuan':'']" id="zhu"
									mode="heightFix"></image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 显示播放进度 -->
			<view class="content-play-progress">
				<text>{{currentTime}}</text>
				<view>
					<!-- activeColor已选择的不生效 -->
					<slider @change="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#ccc"
						:value='percent'></slider>
				</view>
				<text>{{duration}}</text>
			</view>
			<view class="controll">
				<view style="margin: 0 30rpx;">
					<u-icon name="heart-fill" size="80rpx" @tap="likeMus"></u-icon>
				</view>
				<!-- 				<view class="left" style="margin: 0 30rpx;">
					<u-icon name="rewind-left-fill" size="80rpx" @tap="perferSong"></u-icon>
				</view> -->
				<view class="stop" style="margin: 0 30rpx;">
					<u-icon name="pause-circle" size="120rpx" v-if="isPlay" @click="stop"></u-icon>
					<u-icon name="play-circle" size="120rpx" v-else @click="begin"></u-icon>
				</view>
				<view class="right" style="margin: 0 30rpx;">
					<u-icon name="list-dot" size="80rpx" @tap="gotoListenlist"></u-icon>
				</view>
				<view class="right" style="margin: 0 30rpx;">
					<u-icon name="rewind-right-fill" size="80rpx" @tap="suijiListon"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				innerAudioContext: Object,
				flag: false,
				currentTime: "00.00",
				duration: "00.00",
				percent: 0,
				value: '',
				allTIme: 0,
				nowTime: 0,
				songs: {},
				songid: 0,
				st: false,
				isHuan:false
			};
		},
		computed: {
			...mapState('song', [
				'isPlay',
				'songId',
				'songUrl',
				'duration',
				'curTime',
				'changeTime',
				'songName',
				'singerName',
				'songPhoto',
				'autoNext',
				'songlist',
				'listIndex',
				'song',
				'songer',
				'tuijianSongs'
			])
		},
		
		onReady() {
			var that = this;
			// uni.$inner.src = this.song.songUrl
			uni.$inner.onPlay(function(res) {
				let duration = uni.$inner.duration;
			})
			if (this.st) {
				this.second1()
			} else {
				setTimeout(() => {
					this.begin()
				}, 1000)
			}
			uni.$inner.onTimeUpdate(function(res) {
				var currentTime = uni.$inner.currentTime * 1000
				that.duration = that.formatTime(uni.$inner.duration)
				that.allTIme = uni.$inner.duration
				// this.setDuration(allTIme)
				that.currentTime = that.formatTime(uni.$inner.currentTime)
				that.nowTime = uni.$inner.currentTime
				that.percent = uni.$inner.currentTime / uni.$inner.duration * 100
			})

			// uni.$inner.onError(function() {
			// 	uni.showToast({
			// 		duration: 500,
			// 		title: "播放失败",
			// 		icon: "error"
			// 	})
			// })
			
			uni.$inner.onEnded(function() {
				console.log("播放完成了");
				console.log(that.$store.state.song)
				console.log(that.$store.state.songId);
				that.nextSong(that.$store.state.song);
				console.log("123456");
				console.log(that.song.songId);
				return
			})
		},

		onLoad(e) {
			if (e.songId != null && e.songId === this.songId) {
				console.log(e.songId);
				this.getSingerInfo(e.songId)
				let res = this.getSongInfo(e.songId)
				console.log(res);
				res.then((son) => {
					this.setSong(son)
					this.setNewSong(son)
					uni.$inner.src = son.songUrl
					this.getSongStyle(son.songStyle)
				})
				this.songid = e.songId
				this.st = false
			} else if (e.songId != null && e.songId !== this.songId) {
				uni.$inner.stop()
				this.setSong(null)
				let res = this.getSongInfo(e.songId)
				this.getSingerInfo(e.songId)
				res.then((son) => {
					this.setSong(son)
					this.setNewSong(son)
					uni.$inner.src = son.songUrl
					this.getSongStyle(son.songStyle)
				})
				this.songid = e.songId
				this.st = false
			} else {
				this.songs = this.$store.state.song
				this.singer = this.$store.state.songer
				console.log(this.songs);
				this.st = true
			}
		},
		methods: {
			suijiListon(){
				uni.$inner.stop()
				let num = Math.floor(Math.random() * this.songlist.length)
				uni.$inner.src = this.songlist[num].songUrl
				this.setSong(this.songlist[num])
				this.getSongInfo(this.songlist[num].songId)
				this.getSongStyle(this.songlist[num].songId)
				this.begin()
			},
			gotoListenlist(id) {
				uni.navigateTo({
					url: "/subpkg/listenList/listenList"
				})
			},
			toRadio(item) {
				uni.navigateTo({
					url: "/pages/mus/mus?songId=" + item
				})
			},

			nextSong(item) {
				uni.$inner.stop()
				this.isHuan = !this.isHuan
				let num = Math.floor(Math.random() * this.songlist.length)
				uni.$inner.src = this.songlist[num].songUrl
				this.setSong(this.songlist[num])
				this.getSongInfo(this.songlist[num].songId)
				this.getSongStyle(this.songlist[num].songId)
				this.begin()
			},
			// nextSong(item) {
			// 	let flag = 0
			// 	if (this.songlist.length == 1) {
			// 		console.log("播放列表就只有一首歌");
			// 		uni.$inner.stop();
			// 		setTimeout(() => {
			// 			uni.$inner.play();
			// 		}, 500)
			// 	} else if (this.songlist.length > 1) {
			// 		console.log("id" + this.song.songId);
			// 		console.log("itemid" + item.songId);
			// 		for (let i = 0; i < this.songlist.length; i++) {
			// 			if (item.songId === this.songlist[i].songId) {
			// 				console.log("itemsongId" + item.songId);
			// 				console.log('list[]' + this.songlist[i].songId);
			// 				flag = i
			// 			}
			// 		}
			// 		console.log("大于一");
			// 		console.log("flag" + flag);
			// 		if (flag < this.songlist.length - 1) {
			// 			console.log("播放下一首");

			// 			this.setSong(this.songlist[flag + 1])
			// 			this.setNewSong(this.songlist[flag + 1])
			// 			uni.$inner.src = this.songlist[flag + 1].songUrl
			// 			this.begin()
			// 		} else {
			// 			console.log("回0");
			// 			flag = 0
			// 			this.setSong(this.songlist[flag])
			// 			this.setNewSong(this.songlist[flag])
			// 			uni.$inner.src = this.songlist[flag].songUrl
			// 			this.begin()
			// 		}
			// 	}
			// },
			second1() {
				uni.$inner.play()
				this.setIsPlay(true)
				uni.$inner.pause()
				this.setIsPlay(false)
				uni.$inner.play()
				this.setIsPlay(true)
			},
			setNewSong(item) {
				this.setSongUrl(item.songUrl)
				this.setsongPhoto(item.songPhoto)
				this.setSongId(item.songId)
				this.setSingerName(item.singerName)
				this.setSongName(item.songName)

			},
			...mapMutations('song', [
				'setIsPlay',
				'setSongId',
				'setSongUrl',
				'setDuration',
				'setCurTime',
				'setChangeTime',
				'setSongName',
				'setSingerName',
				'setsongPhoto',
				'setAutoNext',
				'setSongList',
				'setListIndex',
				'setSong',
				'setSonger',
				'settuijianSongs'
			]),
			//更新播放次数
			updateSongNum() {
				this.isHuan = !this.isHuan
				uni.$http.get("/song/updateSongNum?num=" + this.songs.songNum + "&id=" + this.songs.songId)
			},
			//开始播放
			begin() {
				this.setIsPlay(true)
				let that = this
				setTimeout(() => {
					uni.$inner.play()
				},)
				
				
			},
			//停止播放
			stop() {
				this.setIsPlay(false)
				uni.$inner.pause()
			},
			//时间格式化
			formatTime(time) {
				var minute = Math.floor(time / 60) % 60;
				var second = Math.floor(time) % 60
				return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
			},
			//进度条控制
			sliderChange(e) {
				let that = this
				//计算播放的秒数
				let gotoplay = e.detail.value / 100 * that.allTIme
				console.log(gotoplay);
				console.log(that.allTIme);
				that.nowTime = gotoplay
				that.currentTime = that.formatTime(that.nowTime)
				//设置进度条到百分多少
				that.percent = e.detail.value
				//AudioContext.seek(number position)
				//跳转到指定播放的秒数位置。
				uni.$inner.seek(gotoplay)
				uni.$inner.pause()
				uni.$inner.play()
			},
			//获取歌曲信息
			async getSongInfo(id) {
				const {
					data: res
				} = await uni.$http.get("/song/find?songId=" + id)
				console.log(res);
				this.songs = res
				this.updateSongNum();
				return res
			},
			async getSongStyle(item) {
				const {
					data: res
				} = await uni.$http.get("/song/findStyle?str=" + item)
				console.log("66666666");
				console.log(res);
				this.settuijianSongs(res)
			},
			//添加到我的歌单
			likeMus() {
				let that = this
				uni.getStorage({
					key: "token",
					success() {
						uni.navigateTo({
							url: "/subpkg/songListLike/songListLike?songId=" + that.songId
						})
					},
					fail() {
						uni.showToast({
							duration: 1000,
							icon: 'error',
							title: '请先登录'
						})
					}
				})
			},
			async getSingerInfo(item) {
				const {
					data: res
				} = await uni.$http.get("/user/findSingerBySongId?songId=" + item)
				this.setSonger(res)
			}
		},
		watch: {
			isHuan() {
				console.log("shabi");
				console.log(this.song);
				console.log(this.song.songStyle);
				this.getSongStyle(this.song.songStyle)
				this.getSingerInfo(this.song.songId)
			}
		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #D9AFD9;
		background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
		height: 100vh;
	}

	.swiperInfo {
		height: 70vh;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.swiper-item1 {}

	.swiper-item2 {
		background-color: red;
	}

	.swiper-item0 {}

	.content-play {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		height: 100%;
		text-align: center;
	}

	.content-play-info {
		margin-top: 20rpx;
	}

	.content-play-info>view {
		color: #888;
		font-size: 40rpx;
	}

	.text1 {
		font-size: 50rpx;
		font-weight: 600;
	}

	.content-play-cover {
		margin-top: 40rpx;
	}

	.image1 {
		width: 370rpx;
		height: 370rpx;
		border-radius: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.zhuan {
		animation: rotate 5s 0.5s linear infinite;
	}

	.controll {
		margin: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 进度条设置 */
	.content-play-progress {
		display: flex;
		align-items: center;
		font-size: 9pt;
		margin: 0 35rpx;
		text-align: center;
	}

	.content-play-progress>view {
		flex: 1;
	}

	.singerImage {
		width: 200rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}

	.PersonTittle {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 40rpx 40rpx;
	}

	.textt1 {
		font-size: 40rpx;
		margin-left: 30rpx;
	}

	.listMap {
		display: flex;

		.listInfo {
			display: flex;
			flex-flow: column wrap;
			margin: 30rpx;
			margin-bottom: 10rpx;
			height: 280px;

			.info {
				display: flex;
				margin: 8rpx;

				.imageSong {
					width: 80px;
					height: 80px;
					border-radius: 15%;
					box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
				}

				.songInfo {
					margin-left: 30rpx;
					padding-left: 30rpx;
					margin-top: 20rpx;
					margin-right: 200rpx;

					.song {
						font-size: 34rpx;
						font-weight: 600;
					}

					.singer {
						color: gray;
					}
				}
			}
		}
	}

	.tuijian {
		font-size: 40rpx;
		font-weight: 500;
		margin: 20rpx 30rpx;
	}

	.songInfo {
		color: #5c5c5c;
		margin: 10rpx 30rpx;
		border-radius: 20rpx;
		boder: 2rpx solid #c5c5c5;
	}
</style>
